<template>

    <div class="container">
        <div>
            <label style="margin-right: 5px;">
                搜索：
            </label>
            <el-input v-model="message" placeholder="请输入关键词" style="width: 15%"></el-input>
            <el-button type="primary" style="margin-left: 5px;" @click="handlePageSelect()">查询</el-button>
            <el-button type="primary" style="float: right"
                @click="Type = 'add'; dialogFormVisible = true">+添加歌单</el-button>
            <template>
                <el-table :data="recodes" stripe style="width: 100%">
                    <el-table-column prop="title" label="标题" width="180">
                    </el-table-column>

                    <el-table-column label="图片">
                        <template slot-scope="scope">
                            <el-image style="width: 80px; height: 80px; border: none;" :src=scope.row.image></el-image>
                        </template>
                    </el-table-column>

                    <el-table-column prop="introduction" label="介绍" :show-overflow-tooltip="true" width="500">
                        <template slot-scope="scope">
                            {{ scope.row.introduction }}
                        </template>
                    </el-table-column>

                    <el-table-column prop="style" label="风格" >
                    </el-table-column>

                    <el-table-column label="歌曲管理" >
                        <template slot-scope="scope">
                            <el-button type="text" @click="
                                handleManageSongList(scope.row.id)">管理歌单</el-button>
                        </template>
                    </el-table-column>

                    <el-table-column prop="operate" label="操作" >
                        <template slot-scope="scope">
                            <el-button type="text" @click="Type = 'update'; Update(scope.row.id)">修改</el-button>
                            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </template>
                    <el-pagination 
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange" 
                    :current-page="page"
                    :page-sizes="[5, 10, 15, 20]" 
                    :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
                    :total="total" class="pageList">
                    </el-pagination>
        </div>

        <el-dialog title="歌单" :visible.sync="dialogFormVisible">

            <el-form ref="form" :model="form" :rules="rules" style="width: 60%; margin-left: 150px;">
                <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="风格" prop="style" :label-width="formLabelWidth">
                    <el-input v-model="form.style" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="介绍" prop="introduction" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.introduction" resize="none" :rows="5"></el-input>
                </el-form-item>
                <el-form-item label="添加图片" prop="image" :label-width="formLabelWidth">
                    <div>
                        <el-upload :action="this.$store.state.upload" :before-upload="beforeAvatarUpload"
                            :on-success="handleAvatarSuccess" class="avatar-uploader">

                            <img v-if="form.image" :src="form.image" class="avatar">

                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button v-if="Type === 'add'" type="primary" @click="handleAdd('form')">确 定 添 加</el-button>
                <el-button v-if="Type === 'update'" type="primary" @click="handleUpdate('form')">确 定 修 改</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import { PageQuery, addSongList, SelectSongListById, UpdateById, DeleteSongList } from '@/api/SongList'

export default {

    data() {
        return {
            message: '',
            total: 0,
            page: 1,
            pageSize: 5,
            recodes: [],
            Type: '',
            id: 0,
            dialogFormVisible: false,
            form: {
                title: '',
                style: '',
                introduction: '',
                image: ''
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' },
                ],
                style: [
                    { required: true, message: '请输入风格', trigger: 'blur' }
                ],
                introduction: [
                    { required: true, message: '请输入介绍', trigger: 'blur' }
                ],
                image: [
                    { required: true, message: '请输入图片', trigger: 'blur' }
                ]
            },
            formLabelWidth: '100px'
        }
    },
    created() {
        this.handlePageSelect()
    },
    methods: {
        //歌单管理
        handleManageSongList(id) {
            this.$router.push({
                path: '/listSong',
                query: {
                    id: id
                }
            })
        },
        //删除
        handleDelete(id) {
            this.$confirm('此操作将永久删除该歌曲, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                DeleteSongList(id).then((res) => {
                    if (res.data.code === 1) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handlePageSelect()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //修改表单
        Update(id) {
            this.id = id
            this.dialogFormVisible = true;
            SelectSongListById(id).then((res) => {
                if (res.data.code === 1) {
                    this.form = res.data.data
                }
            })
        },
        //提交修改
        handleUpdate(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const data = { 'title': this.form.title, 'style': this.form.style, 'introduction': this.form.introduction, 'image': this.form.image, 'id': this.id }
                    UpdateById(data).then((res) => {
                        if (res.data.code === 1) {
                            this.$message.success('修改成功')
                            this.dialogFormVisible = false
                            this.form.title = '',
                                this.form.style = '',
                                this.form.introduction = '',
                                this.form.image = ''
                                this.handlePageSelect()
                        }
                        else {
                            this.$message.error(res.data.msg)
                        }
                    })

                }
                else {
                    this.$message.error('请输入正确的表单项')
                }
            })
        },
        //提交表单
        handleAdd(form) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    const data = { 'title': this.form.title, 'style': this.form.style, 'introduction': this.form.introduction, 'image': this.form.image }
                    addSongList(data).then((res) => {
                        if (res.data.code === 1) {
                            this.$message.success('添加成功')
                            this.dialogFormVisible = false
                            this.form.title = '',
                                this.form.style = '',
                                this.form.introduction = '',
                                this.form.image = ''
                                this.handlePageSelect()
                        }
                        else {
                            this.$message.error(res.data.msg)
                        }
                    })

                }
                else {
                    this.$message.error('请输入正确的表单项')
                }
            })
        }
        ,
        //歌单的分页查询
        handlePageSelect() {
            const params = { 'message': this.message, page: this.page, pageSize: this.pageSize }
            PageQuery(params).then((res) => {
                if (res.data.code === 1) {
                    this.recodes = res.data.data.recodes;
                    this.total = res.data.data.total;
                }
            }).catch((error) => {
                this.$message.error('请求出错了')
            })
        },//更改pageSize
        handleSizeChange(pageSize) {
            this.pageSize = pageSize
            this.handlePageSelect()
        },
        //更改当前页码
        handleCurrentChange(page) {
            this.page = page
            this.handlePageSelect()
        },
        handleAvatarSuccess(res, file) {
            this.form.image = `${res.data}`;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

    }

}
</script>

<style>
.container {
    z-index: 1;
    background: #fff;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 50px;
    color: #8c939d;
    width: 175px;
    height: 175px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);

}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>